<template>
  <div class="header-box">
    <div class="box">

    </div>
    <div class="settings-box">
      <el-dropdown>
        <div class="">
          <el-avatar shape="square" :size="40" />
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="goOut = true">退出账号</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
  <!--  退出登陆-->
  <el-dialog v-model="goOut"  width="500" align-center center title="确认退出账号？">
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="goOut = false">取消</el-button>
        <el-button type="primary" @click="goOutFun">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { conferenceUserPage } from "../../service/api";
import { useRouter } from 'vue-router'

const router = useRouter();


const goOut = ref(false)

const goOutFun = () => {
  window.localStorage.clear();
  window.sessionStorage.clear();
  router.push({
    name: "login"
  })
}

onMounted(() => {
  list();
})

const PageData = ref({
  page: 0,
  limit: 9,
  params: ""
})

const List = ref<any>([])

function list() {
  conferenceUserPage(PageData.value)
    .then(res => {
      if (PageData.value.page === 0) {
        List.value = [];
        List.value = res.data.data.records
      } else {
        List.value.push(...(res.data.data.records));
      }
      PageData.value.page++;
    }).catch(err => {
      console.log(err)
    })
}

</script>

<style scoped lang="less">
.box {
  .el-input {
    margin-top: 15px;
  }
}

.header-box {
  width: 100%;
  height: 100%;
  background: #36B3B3;
  display: flex;
  flex-direction: row;
  border-bottom: 0.5px solid #fff;
}


.header-box>div {
  height: 70px;
}

.box {
  flex: 10;
}

.my-box {
  flex: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.settings-box {
  flex: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>